<template>
  <!-- 邀请报价记录 -->
  <el-dialog
    v-model="props.modelValue"
    width="800px"
    :show-close="false"
    :close-on-click-modal="false"
    :before-close="handleClose"
  >
    <template #header="{ close, titleId, titleClass }">
      <div class="my-header">
        <h4
          :id="titleId"
          :class="titleClass"
        >
          {{ t('userCenter.b12') }}
        </h4>
        <img
          src="@/assets/img/icon_guanbi.png"
          @click="close"
          class="close"
        />
      </div>
    </template>

    <el-table
      :data="tableData"
      stripe
    >
      <el-table-column
        prop="quoteCompanyName"
        :label="t('userCenter.col1')"
        align="center"
      />
      <el-table-column
        prop="isOrNotQuoted"
        :label="t('userCenter.col2')"
        align="center"
      />
      <el-table-column
        prop="submitTime"
        :label="t('userCenter.col3')"
        align="center"
      >
        <template #default="{ row }">
          {{ dateFormat(row.submitTime) }}
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { useI18n } from 'vue-i18n'
import { queryQuoteRecordApi as d } from '@/service/dockOrder.js'
import { queryQuoteRecordApi as p } from '@/service/procurement'
import { queryQuoteRecordApi as e } from '@/service/externalAssistance'
import { dateFormat } from '@/utils'

const { t, locale } = useI18n()

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  orderId: {
    type: [String, Number],
    default: null
  },
  // dockRepair procurement externalAssistance
  type: {
    type: String,
    default: ''
  }
})

const emit = defineEmits(['update:modelValue'])

const handleClose = () => {
  emit('update:modelValue')
}

const tableData = ref([])

//
const getData = () => {
  const obj = {
    dockRepair: d,
    procurement: p,
    externalAssistance: e
  }

  obj[props.type]({ orderId: props.orderId }).then(({ data }) => {
    tableData.value = data
  })
}

getData()
</script>

<style scoped lang="scss"></style>
